<template>
  <div class="one">
    <div class="search-bar">
      <el-form :model="getParams" label-width="40px" style="padding: 0 30px;">
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="编码" style="margin-bottom: 5px;">
              <el-input v-model="getParams.code" size="medium" @keyup.enter="handleSearch" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="名称" style="margin-bottom: 5px;">
              <el-input v-model="getParams.value" @keyup.enter="handleSearch" size="medium" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <div style="margin-top: 3px;">
              <el-button icon="el-icon-search" type="primary" size="small" @click="handleSearch">查询</el-button>
               <el-button icon="el-icon-refresh-left" size="small" @click="handleClear">重置</el-button>
            </div>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div ref="ref" class="table-box">
      <div class="btn">
        <el-button icon="el-icon-plus" type="primary" @click="handleShowDialog" size="small">新增</el-button>
      </div>
      <Table :height="height" :data="tableData || []" :columns="oneColumns" :ifNoEditColumns="noEditColumns" :ifNoEditColumnsEnd="ifNoEditColumnsEnd" :table-option="tableOption" :total="total">
        <template scope="scope">
          <el-button v-if="scope.scope.row.isEditing" @click="saveRow(scope.scope.row)" type="text" size="mini">保存</el-button>
          <el-button v-if="scope.scope.row.isEditing" @click="cancleRow(scope.scope.row)" type="text" size="mini">取消</el-button>
          <template v-if="!scope.scope.row.isEditing">
            <el-button @click="editRow(scope.scope.row)" type="text" size="mini">编辑</el-button>
            <el-button @click="deleteRow(scope.scope.row)" type="text" size="mini">{{scope.scope.row.isValid==='启用' ? '禁用' : '启用'}}</el-button>
             <el-button @click="handleDel(scope.scope.row)" type="text" size="mini">删除</el-button>
          </template>
        </template>
      </Table>
    </div>
    <el-dialog title="新增" :visible.sync="dialogVisible" width="30%">
      <el-form ref="addForm" :model="addForm" :rules="rules" class="addForm" label-width="50px">
        <el-form-item label="编码" prop="code">
          <el-input v-model="addForm.code" placeholder="请输入代码" size="small"></el-input>
        </el-form-item>
        <el-form-item label="名称" prop="value">
          <el-input v-model="addForm.value" placeholder="请输入描述" size="small"></el-input>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="addForm.remark" placeholder="请输入备注" size="small"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleAdd('addForm')">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import Table from '@/components/Table/table'
import { oneColumns, noEditColumns, ifNoEditColumnsEnd } from '../index.js'
import { getbasicData, editbasicData, addbasicData, delbasicData, delTrueBasicData } from '@/api/modules/systemManage.js'
export default {
  components: {
    Table
  },
  data() {
    return {
      height: null,
      tableData: [],
      oneColumns,
      noEditColumns,
      ifNoEditColumnsEnd,
      tableOption: {
        isShowOperate: true,
        operateWidth: '120px',
        NoInlineEdit: true,
        NoInlineEditEnd: true
      },
      // pageOption: {
      //   pageNum: 1,
      //   pageSize: 10
      // },
      total: 0,
      getParams: {
        tableName: 'company',
        field: 'cmhk_status',
        page: {
          pageNum: 1,
          pageSize: 10
        },
        code: null,
        value: null
      },
      addForm: {
        tableName: 'company',
        field: 'cmhk_status',
        code: '',
        value: '',
        remark: ''
      },
      rules: {
        code: [{ required: true, message: '请输入代码', trigger: 'change' }],
        value: [{ required: true, message: '请输入描述', trigger: 'change' }]
      },
      dialogVisible: false
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.height = this.$refs.ref.offsetHeight - 60
    })
    window.onresize = () => {
      this.height = this.$refs.ref.offsetHeight - 60
    }
    this.initData(this.getParams)
  },
  destroyed(){
    window.onresize = null
  },
  methods: {
    initData(params) {
      getbasicData(params).then(res => {
       if (res.data.code === '200') {
          let data = res.data.data || []
          this.tableData = data.map(value => {
            return Object.assign({}, value, {isEditing: false})
          })
        }
      })
    },
    // 分页
    onTableChange(val) {
      this.getParams.page = val
      this.initData(this.getParams)
    },
    // 查询
    handleSearch() {
      this.initData(this.getParams)
    },
    handleClear() {
      this.getParams.code = null
      this.getParams.value = null
    },
    handleShowDialog() {
      this.dialogVisible = true
    },
    // 新增
    handleAdd(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          addbasicData(this.addForm).then(res => {
            if (res.data.code === '200') {
              this.$message.success('新增成功')
              this.resetForm('addForm')
              this.dialogVisible = false
              this.initData(this.getParams)
            } else {
              this.$message.error(res.data.message)
            }
          })
        } else {
          return false
        }
      })
    },
    // 清空表单
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    saveRow(row) {
      const data = row
      if (data.value === '') {
        this.$message.error('描述不能为空')
      } else {
        editbasicData(data).then(res => {
          if (res.data.code === '200') {
            this.$message.success('修改成功')
            row.isEditing = false
            this.initData(this.getParams)
          } else {
            this.$message.error('修改失败')
          }
        })
      }
      
    },
    cancleRow(row) {
      row.isEditing = false
    },
    editRow(row) {
      console.log(row, 'edit')
      row.isEditing = true
    },
    deleteRow(row) {
      console.log(row, 'del')
      this.$confirm('确认更改?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delbasicData(row).then(res => {
          if (res.data.code === '200') {
            this.$message({
              type: 'success',
              message: '更改成功!'
            })
            // this.getParams.page.pageNum = 1
            // this.pageOption.pageNum = 1
            this.initData(this.getParams)
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消更改'
        })
      })
    },
    handleDel(row) {
      this.$confirm('确认删除', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const data = {
          id: row.id
        }
        delTrueBasicData(data).then(res => {
          if (res.data.code === '200') {
            this.$message.success('删除成功')
            this.initData(this.getParams)
          } else {
            this.$message.error(res.data.message)
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    }
  }
}
</script>

<style lang="less" scoped>
  .one {
    height: calc(100vh - 145px);
    // border: 1px solid blueviolet;
    padding: 0 10px;
    .search-bar {
      width: 100%;
      margin-bottom: 10px;
      padding: 20px 0px;
      box-shadow: 0 1px 4px 0 rgba(0,21,41,.12);
      .search-item {
        display: flex;
        justify-content: center;
        align-items: center;
        .search-item-title {
          margin-right: 10px;
        }
      }
    }
    .table-box {
      width: 100%;
      height: calc(100% - 73px);
      // border: 1px solid red;
      .btn {
        width: 100%;
        padding: 0 20px 10px 20px;
      }
    }
  }
</style>
<style>
.table-row th {
padding: 0 !important;
height: 50px;
line-height: 50px;
text-align: center;
}
</style>